<iframe th:replace="common/top.html" width="100%" frameborder="0" scrolling="yes" class="x-iframe"></iframe>

<div id="Catalog" class="Catalog">

    <div id="Cart">

        <h2>Shopping Cart</h2>

        <form action="updateCart" method="post">
            <table id="table">
                <tr>
                    <th><b>Item ID</b></th>
                    <th><b>Product ID</b></th>
                    <th><b>Description</b></th>
                    <th><b>In Stock?</b></th>
                    <th><b>Quantity</b></th>
                    <th><b>List Price</b></th>
                    <th><b>Total Cost</b></th>
                    <th>&nbsp;</th>
                </tr>

                <tr th:if="${session.cart.numberOfItems==0}">
                    <td colspan="8"><b>Your cart is empty.</b></td>
                </tr>


                <tr th:each="cartItem:${session.cart.itemList}">
                    <td>
                        <a th:href="'/catalog/viewItem?itemId='+${cartItem.item.itemId}" th:text="${cartItem.item.itemId}"></a>
                    </td>
                    <td th:text="${cartItem.item.product.productId}"></td>
                    <td th:text="${cartItem.item.attribute1}+','+${cartItem.item.product.name}">
                    </td>
                    <td th:text="${cartItem.inStock}"></td>
                    <td>

                        <input type="text" id="quantity" name="${cartItem.item.itemId}" onblur="updateCart();" th:value="${cartItem.quantity}">
                        <div id="cartMsg"></div>
                        <script type="text/javascript" src="../js/Update.js"></script>

                    </td>
                    <td th:with="num=${cartItem.item.listPrice}" th:utext="${#numbers.formatCurrency(num)}"></td>
                    <td>
                        <label id="total" th:text="${cartItem.total}"></label>
                    <td>
                        <a th:href="@{/remove(itemId=${cartItem.item.itemId})}" class="btn">Remove</a>
                    </td>
                </tr>
                <tr>
                    <td colspan="7">Sub Total: <label id="subtotal" th:text="${session.cart.subTotal}"></label>
<!--                        <input type="submit" value="Update Cart" id="updateCart">-->
                    </td>
                    <td>&nbsp;</td>
                </tr>
            </table>
            <script>
                let addQuantity = document.querySelector('#addQuantity');
                let inputQuantity = document.querySelector('.inputQuantity');
                $(document).on('click','#addQuantity',function(e){
                    e.stopPropagation();
                    let inputItem = this.parentNode.firstElementChild;
                    inputItem.value++;
                })
                $(document).on('click','#subQuantity',function(e){
                    e.stopPropagation();
                    let inputItem = this.parentNode.firstElementChild;
                    inputItem.value--;
                })
            </script>
            <div class="proceed">
                <a href="/newOrder" class="btn">Proceed to Checkout</a>
            </div>
        </form>

    </div>

    <div id="MyList">
        <!--        <c:if test="${sessionScope.loginAccount != null}">-->
        <!--            <c:if test="${sessionScope.loginAccount.listOption}">-->
        <!--                <%@ include file="IncludeMyList.jsp"%>-->
        <!--            </c:if>-->
        <!--        </c:if>-->
    </div>

    <div id="Separator">&nbsp;</div>
</div>

<iframe th:replace="common/bottom.html" width="100%" frameborder="0" scrolling="yes" class="x-iframe"></iframe>
